<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in goodlist"
        :key="index"
        @click="change(item.id)"
      >
        <h2>
          <img :src="item.list_pic_url" alt="" width="100%" />
        </h2>
        <div>
          <h4>{{ item.name }}</h4>
          <p>{{ item.retail_price | price }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {GetChannelList} from "../../request/api.js"
export default {
    data () {
        return {
            goodlist:[]
        }
    },
    methods:{
         //点击跳珠详情
    change(id){
        this.$router.push({
         path:"/details",
         query:{
           id:id
         }
       }) 
    },
    },
    created(){
        GetChannelList({ categoryId: this.$route.query.id, size: 50, page: 1 })
        .then((res) => {
          this.goodlist = res.data.goodsList;
        })
        .catch((err) => {});
    },
    filters: {
    price(v) {
      return "¥" + v.toFixed(2) + "元";
    },
  },
};
</script>

<style lang="less">
 ul {
    margin-top: 0.2rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 48%;
      div {
        text-align: center;
        line-height: 0.3rem;
        font-size: small;
        p {
          color: #8b0000;
        }
      }
    }
  }
</style>